
<!DOCTYPE html>
<html lang="zh">



<head>
  <script>
    window.themeRuntime = {
      root: "/",
      scriptsMap: {},
      init: {
        status: false
      },
      commentRest: {
        status: false
      },
      versions: {
        theme: "2.0.3",
        mdui: "0.4.0",
        fetch: "3.0.0",
        es6promise: "4.2.5+7f2b526d",
        lightgallery: "1.0.1",
        smoothscroll: "15.2.0"
      }
      
    };
    console.info("%cCopyright © 2018 - " + new Date().getFullYear() +" Halyul\n"+'Theme Version: ' + themeRuntime.versions.theme +'%c\nhttps://github.com/Halyul/hexo-theme-mdui',"font-size: 14px;color: #3F51B5;","color: #448AFF;text-decoration: none");
  </script>
  <!--
        © HEXO MDUI Theme
        https://github.com/Halyul/hexo-theme-mdui
        -->

  <meta charset="UTF-8">
  <title>Search - Kozumi Blog</title>

  <!-- Favicons -->
  <link rel="icon shortcut" type="image/ico" href="/images/favicon.png">
  <link rel="icon" sizes="192x192" href="/images/favicon.png">
  <link rel="apple-touch-icon" href="/images/favicon.png">

  <!-- Meta & Info -->
  <meta http-equiv="X-UA-Compatible">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  <meta name="theme-color" content="#fff">

  <meta name="author" content="Kozumi">
  
  <meta name="keywords" content="blog, hexo, mdui">

  <!--iOS -->
  <meta name="apple-mobile-web-app-title" content="Kozumi Blog">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="480">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">

  <!-- The Open Graph protocol -->
  <meta property="og:url" content="https://xuyang1638.github.io">
  <meta property="og:type" content="blog">
  <meta property="og:title" content="Search - Kozumi Blog | Kozumi Blog">
  <meta property="og:image" content="/images/favicon.png" />
  

  

  

  <!-- Import CSS -->
  
    
<link rel="stylesheet" href="/css/mdui.css">

  

  

<meta name="generator" content="Hexo 4.2.0"></head>


<body class="mdui-drawer-body-left mdui-theme-primary-indigo mdui-theme-accent-pink">

  <style>
    #spinner {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
          opacity: 1;
      -webkit-transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1);
          transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1);
    }
    main {
      opacity: 0;
      -webkit-transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1);
      transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1);
      display: none;
    }
  </style>
  <div id="spinner">
    <style>
      .spinner {

      -webkit-animation: rotator 1.4s linear infinite;
              animation: rotator 1.4s linear infinite;
      }

      @-webkit-keyframes rotator {
      0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(270deg);
                transform: rotate(270deg);
      }
      }

      @keyframes rotator {
      0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(270deg);
                transform: rotate(270deg);
      }
      }

      .path {
      stroke-dasharray: 187;
      stroke-dashoffset: 0;
      -webkit-transform-origin: center;
              transform-origin: center;
      -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
              animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
      }

      @-webkit-keyframes colors {
      0% {
        stroke: #4285F4;
      }
      25% {
        stroke: #DE3E35;
      }
      50% {
        stroke: #F7C223;
      }
      75% {
        stroke: #1B9A59;
      }
      100% {
        stroke: #4285F4;
      }
      }

      @keyframes colors {
      0% {
        stroke: #4285F4;
      }
      25% {
        stroke: #DE3E35;
      }
      50% {
        stroke: #F7C223;
      }
      75% {
        stroke: #1B9A59;
      }
      100% {
        stroke: #4285F4;
      }
      }

      @-webkit-keyframes dash {
      0% {
        stroke-dashoffset: 187;
      }
      50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
      }
      100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
                transform: rotate(450deg);
      }
      }

      @keyframes dash {
      0% {
        stroke-dashoffset: 187;
      }
      50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
      }
      100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
                transform: rotate(450deg);
      }
      }
    </style>
    <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
      <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
    </svg>
  </div>

  <main>
    <div class="mdui-appbar mdui-appbar-fixed mdui-color-white mdui-shadow-0 theme-appbar">
  <div class="mdui-toolbar theme-toolbar-top">
    
      <a href="/" class="mdui-btn mdui-btn-icon mdui-ripple theme-appbar__burger theme-appbar__burger--arrow">
        <i class="mdui-icon">
          <span></span>
        </i>
      </a>
    
  </div>
  <div class="mdui-toolbar theme-toolbar-bottom">
    <span class="theme-toolbar-bottom__title">Kozumi Blog</span>
    
      <a href="/search.html" class="mdui-textfield-icon mdui-btn mdui-btn-icon theme-toolbar-bottom__search">
        <i class="mdui-icon material-icons">&#xe8b6;</i>
      </a>
    
  </div>
  <div class="mdui-progress theme-appbar__progress" id="progressBar">
    <div class="mdui-progress-indeterminate"></div>
  </div>
</div>

    <div class="mdui-drawer mdui-drawer-full-height theme-drawer" id="drawer">
  <!-- header -->
  <div class="theme-drawer__header">
  <div class="theme-drawer__header__layer-1">
    <div class="mdui-toolbar theme-toolbar-top">
      
        <a href="javascript:;" class="mdui-btn mdui-btn-icon mdui-ripple theme-appbar__burger theme-appbar__burger--drawer theme-appbar__burger--arrow" id="drawer-back">
          <i class="mdui-icon">
            <span></span>
          </i>
        </a>
      
    </div>
    <div class="mdui-toolbar theme-toolbar-bottom">
      <span class="theme-toolbar-bottom__title">Kozumi Blog</span>
    </div>
  </div>
  <div class="theme-drawer__header__layer-2" style="background-image: url(/images/bg.png)">
    <img class="mdui-img-circle theme-drawer__header__layer-2__user__avatar" src="/images/avatar.png"/>
    <div class="theme-drawer__header__layer-2__user__info">
      <div class="theme-drawer__header__layer-2__user__info__author mdui-text-color-white-text">
        Kozumi
      </div>
      <div class="theme-drawer__header__layer-2__user__info__slogan mdui-text-color-white-secondary">
        Do the best
      </div>
    </div>
  </div>
</div>

  <div class="theme-drawer__warpper">
    <!-- content -->
    <div class="theme-drawer__warpper__content">
  <ul class="mdui-list">
    <a href="/" class="mdui-list-item mdui-ripple mdui-ripple-white">
      <i class="mdui-list-item-icon mdui-icon material-icons">&#xe88a;</i>
      <div class="mdui-list-item-content">Index</div>
    </a>
    <a href="/archives/" class="mdui-list-item mdui-ripple mdui-ripple-white">
      <i class="mdui-list-item-icon mdui-icon material-icons">&#xe149;</i>
      <div class="mdui-list-item-content">Archives</div>
    </a>
    <ul class="mdui-list mdui-collapse" mdui-collapse="{accordion: true}" mdui-collapse>
      
      
      <div class="mdui-collapse-item ">
        <div class="mdui-collapse-item-header mdui-list-item mdui-ripple mdui-ripple-white">
          <i class="mdui-list-item-icon mdui-icon material-icons">&#xe916;</i>
          <div class="mdui-list-item-content">Years</div>
          <i class="mdui-collapse-item-arrow mdui-icon material-icons">&#xe5c5;</i>
        </div>
        <div class="mdui-collapse-item-body mdui-list">
          
          
            <a href="/archives/2020/" class="mdui-list-item mdui-ripple">
              2020
            </a>
          
        </div>
      </div>
    </ul>
  </ul>
  
    <div class="mdui-divider"></div>
    <ul class="mdui-list" mdui-collapse="{accordion: true}" mdui-collapse>
      
        
          
            <a href="/myfriends" target="_self" class="mdui-list-item mdui-ripple mdui-ripple-white">
          
              
              
                <i class="mdui-list-item-icon mdui-icon material-icons">&#xe5ca;</i>
              
              
              <div class="mdui-list-item-content">My Friends</div>
            </a>
        
      
        
          
            <a href="/timeline" target="_self" class="mdui-list-item mdui-ripple mdui-ripple-white">
          
              
              
                <i class="mdui-list-item-icon mdui-icon material-icons">home</i>
              
              
              <div class="mdui-list-item-content">Timeline</div>
            </a>
        
      
    </ul>
  
</div>

    <div class="theme-spacer"></div>
    <!-- footer -->
    <div class="theme-drawer__warpper__footer">
  <div class="mdui-typo mdui-typo-caption-opacity">
    Powered by <a href="http://hexo.io" target="_blank">Hexo</a>
    <br />
    Theme - <a href="//github.com/Halyul/hexo-theme-mdui" target="_blank">Halyul/MDUI</a>
    <br />
    <span>
      Copyright ©
      <span year></span>
      Kozumi
    </span>
    
    
      <br />
      <span>
        Last Updated: Apr 19, 2020
      </span>
    
    
  </div>
</div>
<script type="text/javascript">
  var copyrightNow = new Date().getFullYear();
  var textContent = document.querySelector('span[year]')
  
    copyrightSince = 2020;
    if (copyrightSince === copyrightNow) {
      textContent.textContent = copyrightNow
    } else {
      textContent.textContent = copyrightSince + ' - ' + copyrightNow
    }
  
</script>

  </div>
</div>

    <div id="top"></div>

    
<script src="/js/lightgallery.min.js"></script>


    <div id="barba-wrapper">
      <div class="barba-container"  data-namespace="search">
        
  <div class="theme-search">
    <div class="theme-search__textfield">
      <div class="mdui-textfield mdui-textfield-floating-label">
        <i class="mdui-icon material-icons">&#xe8b6;</i>
        <label class="mdui-textfield-label">Search</label>
        <textarea class="mdui-textfield-input" id="search-field"></textarea>
      </div>
    </div>
    <div id="search-result">

    </div>
    <button id="index-fab" class="mdui-fab mdui-fab-fixed mdui-ripple mdui-color-theme-accent mdui-fab-hide" onclick="smoothScroll.animateScroll( 0 );">
  <i class="mdui-icon material-icons">&#xe5d8;</i>
</button>

  </div>
  <script type="text/javascript">
  themeRuntime.scriptsMap.search = [];
  (function() {
    var fabTopFlag = false;
    var fabEl = document.getElementById('index-fab');
    function fabShowHide() {
      var bodyScrolled = document.documentElement.scrollTop || document.body.scrollTop;
      if (bodyScrolled > 0 && !fabTopFlag) {
        fabEl.classList.remove('mdui-fab-hide');
        fabTopFlag = true;
      } else if (bodyScrolled === 0 && fabTopFlag) {
        fabEl.classList.add('mdui-fab-hide');
        fabTopFlag = false;
      }
    }
    fabShowHide()
    window.addEventListener('scroll', fabShowHide);
    var listener = {
      function: fabShowHide,
      event: 'scroll',
      el: window,
      removed: false
    }
    themeRuntime.scriptsMap.search.push(listener)
  })();
</script>
<script>
  var res;
  var searchFilePath = '/search.json';
  var searchFunc = function(searchFilePath) {
    'use strict';
    fetch(searchFilePath).then(function(res) {
      return res.json();
    }).then(function(datas) {
      var $input = document.getElementById("search-field");
      var $resultContent = document.getElementById("search-result");
      $input.focus();
      $input.addEventListener('input', searchResult);
      function searchResult() {
        var str = '';
        var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
        $resultContent.innerHTML = '';
        if (this.value.trim().length <= 0) {
          return;
        }
        // perform local searching
        datas.forEach(function(data) {
          if (typeof data.title === "undefined") return
          if (typeof data.content === "undefined") return
          var isMatch = true;
          var content_index = [];
          var data_title = data.title.trim().toLowerCase();
          var data_content = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase();
          var data_url = data.url;
          var index_title = -1;
          var index_content = -1;
          var first_occur = -1;
          // only match artiles with not empty titles and contents
          if (data_title !== '' && data_content !== '') {
            keywords.forEach(function(keyword, i) {
              index_title = data_title.indexOf(keyword);
              index_content = data_content.indexOf(keyword);
              if (index_title < 0 && index_content < 0) {
                isMatch = false;
              } else {
                if (index_content < 0) {
                  index_content = 0;
                }
                if (i === 0) {
                  first_occur = index_content;
                }
              }
            });
          }
          // show search results
          var position = 1;
          if (isMatch) {
            var randomPic = Math.floor(Math.random() * 44 + 1);
            str += '<div class="theme-posts"><div class="theme-posts__post"><article class="mdui-card mdui-hoverable">';
            str += '<section class="mdui-card-media theme-posts__post__media" style="background-image: url(\'/images/random/' + randomPic + '.png\' )">';
            str += '<img src="/images/random/' + randomPic + '.png" class="theme-posts__post__media__image" />';
            str += '<div class="mdui-card-media-covered theme-posts__post__media-covered"><div class="mdui-card-primary mdui-typo">';
            str += '<a href="' + data_url + '" target="_self" class="mdui-card-primary-title mdui-text-truncate">' + data_title + '</a>';

            str += '</div></div></section><section class="mdui-card-content">'
            var content = data.content.trim().replace(/<[^>]+>/g, '');
            if (first_occur >= 0) {
              // cut out characters
              var start = first_occur - 6;
              var end = first_occur + 6;
              if (start < 0) {
                start = 0;
              }
              if (start === 0) {
                end = 10;
              }
              if (end > content.length) {
                end = content.length;
              }
              var match_content = content.substr(start, end);
              // highlight all keywords
              keywords.forEach(function(keyword) {
                var regS = new RegExp(keyword, 'gi');
                match_content = match_content.replace(regS, '<strong><mark>' + keyword + '</mark></strong>');
              })
              str += '<p class="result">' + match_content + '...</p>';
            }
            str += '</section><div class="mdui-divider" style="margin: 0 16px;"></div>'

            if (typeof data.categories !== 'undefined' && typeof data.tags !== 'undefined') {
              str += '<section class="theme-posts__post__footer">'
                if (typeof data.categories !== 'undefined') {
                  if (data.categories.length === 1) {
                    data.categories.forEach(function(category) {
                      str += '<a href="' + category + '" class="theme-link--no-style">';
                      str +='<div class="mdui-chip theme-posts__post__footer__categories"><span class="mdui-chip-icon"><i class="mdui-icon material-icons mdui-text-center">&#xe86e;</i></span>';
                      str += '<span class="mdui-chip-title">' + category + '</span>';
                      str += '</div></a>';
                    })
                  } else {
                    data.categories.forEach(function(category) {
                      str += '<div class="theme-posts__post__footer__categories mdui-valign">';
                      str += '<button class="mdui-btn mdui-btn-icon mdui-btn-dense mdui-ripple" mdui-menu="{target: \'#post-categories-' + position + '\'}">'
                      str +='<i class="mdui-list-item-icon mdui-icon material-icons">&#xe86e;</i></button>';
                      str += '<ul class="mdui-menu" id="post-categories-' + position + '">';
                      str += '<li class="mdui-menu-item">'
                      str += '<a href="' + category + '" class="mdui-ripple">'
                      str += '<span>' + category + '</span>'
                      str += '</a></li></ul></div>'
                    })
                  }

                }
                if (typeof data.tags !== 'undefined') {
                  if (data.tags.length === 1) {
                    data.tags.forEach(function(tag) {
                      str += '<a href="' + tag + '" class="theme-link--no-style">';
                      str += '<div class="mdui-chip theme-posts__post__footer__tags"><span class="mdui-chip-icon"><i class="mdui-icon fa fa-tags mdui-text-center"></i></span>';
                      str += '<span class="mdui-chip-title">' + tag + '</span>';
                      str += '</div></a>';
                    })
                  } else {
                    data.tags.forEach(function(tag) {
                      str += '<div class="theme-posts__post__footer__tags mdui-valign">';
                      str += '<button class="mdui-btn mdui-btn-icon mdui-btn-dense mdui-ripple" mdui-menu="{target: \'#post-tags-' + position + '\'}">';
                      str += '<i class="mdui-list-item-icon mdui-icon fa fa-tags mdui-text-center"></i></button>';
                      str += '<ul class="mdui-menu" id="post-tags-' + position + '">';
                      str += '<li class="mdui-menu-item">';
                      str += '<a href="' + tag + '" class="mdui-ripple">';
                      str += '<span>' + tag + '</span>';
                      str += '</a></li></ul></div>';
                    })
                  }
                }
                str += '</section>'
            }

            str+= '</article></div></div>';
            position++;
          }
        });
        $resultContent.innerHTML = str;
      }
      var listener = {
        function: searchResult,
        event: 'input',
        el: $input,
        removed: false
      }
      themeRuntime.scriptsMap.search.push(listener)
    })
  }
  searchFunc(searchFilePath)
</script>



      </div>
    </div>
  </main>

  <div id="outdated" style="z-index: 9999;">
    <h6>Your browser is out-of-date!</h6>
    <p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/" target="_blank" rel="noopener">Update my browser now </a></p>
    <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
  </div>
  <!-- import js -->


  
<script src="/js/outdatedbrowser.min.js"></script>




  
    
<script src="/js/js.barba.min.js"></script>

    <script type="text/javascript">
      Barba.Utils.errorPageUrl = '/404.html';
    </script>
  


<!-- theme js -->
<script type="text/javascript">
  (function() {
    var appbarTopFlag = false;
    var appbarEl = document.querySelector('.theme-appbar');
    function appbarShadow() {
      var bodyScrolled = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
      if (bodyScrolled > 0 && !appbarTopFlag) {
        appbarEl.classList.add('theme-appbar--shadow');
        appbarTopFlag = true;
      } else if (bodyScrolled === 0 && appbarTopFlag) {
        appbarEl.classList.remove('theme-appbar--shadow');
        appbarTopFlag = false;
      }
    }
    appbarShadow()
    window.addEventListener('scroll', appbarShadow);
  })();
</script>






<script type="text/javascript">
  document.querySelector('body').classList.add('theme-loaded')
</script>




</body>
</html>
